<template>
  <!-- 使用a-modal做签字的弹框 -->
  <a-modal v-model:visible="visible" title="签字" @afterClose="close">
    <template #footer>
      <a-button @click="handleReset">清空画板</a-button>
      <a-button type="primary" @click="handleGenerate">签字<highlight-outlined /></a-button>
    </template>
    <vue-esign 
      ref="esignRef" 
      :width="800" 
      :height="300" 
      :isCrop="vdata.isCrop"
      :lineWidth="vdata.lineWidth"
      :lineColor="vdata.lineColor"
      bgColor="#FFFFFF"
      :isClearBgColor="false"
    />
  </a-modal>
</template>
  
<script setup lang="ts">
import { ref, reactive, getCurrentInstance, defineExpose, defineEmits} from 'vue'
import vueEsign from 'vue-esign'

const { $infoBox } = getCurrentInstance()!.appContext.config.globalProperties
const esignRef = ref()
const visible = ref<boolean>(false)

const emit = defineEmits(['callback'])

// esign 参数
const vdata = reactive({
  lineWidth: 6,
  lineColor: '#000000',
  // bgColor: '#eaeaea',
  isCrop: false
})

/**
* 打开弹窗
*/
function show() {
  visible.value = true
}

/**
 * 关闭弹窗
 */
function close() {
  handleReset()
  visible.value = false
}

/**
 * 重置签字面板
 */
function handleReset() {
  esignRef.value.reset()
}

/**
 * 生成签字图片Base64
 */
function handleGenerate() {
  esignRef.value.generate().then(res => {
    emit('callback', res)
    visible.value = false
  }).catch(err => {
    $infoBox.message.error('请签字')
  })
}

defineExpose({ show })
</script>
  
<style lang="less" scoped>

</style>